<template>
  <div class="top">
    <!-- 下载 -->

    <el-dialog
      title="移动应用下载"
      :visible.sync="dialogVisibleDown"
      width="20%"
      :close-on-click-modal="false"
    >
      <main></main>
    </el-dialog>
    <!-- 用户信息 -->
    <el-dialog
      title="用户信息"
      :visible.sync="dialogVisibleInfo"
      :show-close="show"
      width="30%"
      :close-on-click-modal="show"
    >
      <span>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item class="phone-btn" label="手机">
            <el-input
              v-model="ruleForm.phone"
              :disabled="telFlag == true ? true : false"
              autocomplete="off"
            ></el-input>
            <el-button class="phone-btn2" type="primary" @click="UnboundTel">{{
              telFlag ? "解绑" : "绑定"
            }}</el-button>
          </el-form-item>
          <el-form-item class="phone-btn" label="邮箱">
            <el-input
              v-model="ruleForm.email"
              :disabled="emailFlag == true ? true : false"
              autocomplete="off"
            ></el-input>
            <el-button
              class="phone-btn2"
              type="primary"
              @click="UnboundEmail"
              >{{ emailFlag ? "解绑" : "绑定" }}</el-button
            >
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelInfo">取 消</el-button>
        <el-button type="primary" @click="sureInfo = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 解绑/绑定电话 -->

    <el-dialog
      :title="telFlag ? '解绑手机' : '绑定手机'"
      :visible.sync="dialogVisibleTel"
      :show-close="show"
      width="30%"
      :close-on-click-modal="show"
    >
      <span>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="手机">
            <el-input
              type="text"
              v-model="ruleForm.phone"
              autocomplete="off"
              maxlength="11"
            >
              ></el-input
            >
          </el-form-item>
          <el-form-item class="phone-btn" label="验证码">
            <el-input
              v-model="ruleForm.verificationCode"
              placeholder="请输入验证码"
              autocomplete="off"
              type="text"
              maxlength="6"
            ></el-input>
            <el-button
              class="phone-btn2"
              type="primary"
              @click="getTelCode"
              :disabled="totalTime == 60 ? false : true"
              >{{ content }}</el-button
            >
          </el-form-item>
        </el-form>
      </span>
      <!-- 绑定 -->

      <span slot="footer" class="dialog-footer" v-if="telFlag">
        <el-button @click="telCancel">取 消</el-button>
        <el-button type="primary" @click="sureTel">确 定</el-button>
      </span>

      <!-- 解绑 -->
      <span slot="footer" class="dialog-footer" v-else>
        <el-button @click="telCancel">取 消</el-button>
        <el-button type="primary" @click="bindTel">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 解绑/绑定邮箱 -->
    <el-dialog
      :title="emailFlag ? '解绑邮箱' : '绑定邮箱'"
      :visible.sync="dialogVisibleEmail"
      :show-close="show"
      width="30%"
      :close-on-click-modal="show"
    >
      <span>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="邮箱">
            <el-input
              type="text"
              v-model="ruleForm.email"
              autocomplete="off"
              clearable
            >
              ></el-input
            >
          </el-form-item>
          <el-form-item class="phone-btn" label="验证码">
            <el-input
              v-model="ruleForm.emailCode"
              autocomplete="off"
            ></el-input>
            <el-button
              class="phone-btn2"
              type="primary"
              @click="getEmailCodeNum"
              :disabled="totalTime == 60 ? false : true"
              >{{ content }}</el-button
            >
          </el-form-item>
        </el-form>
      </span>
      <!-- 解绑 -->
      <span slot="footer" class="dialog-footer" v-if="emailFlag">
        <el-button @click="emailCancel">取 消</el-button>
        <el-button type="primary" @click="sureEmail">确 定</el-button>
      </span>
      <!-- 绑定 -->
      <span slot="footer" class="dialog-footer" v-else>
        <el-button @click="emailCancel">取 消</el-button>
        <el-button type="primary" @click="bindEml">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改密码 -->
    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%">
      <span>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户">
            <el-input
              type="text"
              v-model="ruleForm.user"
              autocomplete="off"
              clearable
            >
              ></el-input
            >
          </el-form-item>
          <el-form-item label="手机">
            <el-input
              type="text"
              v-model="ruleForm.phone"
              autocomplete="off"
              clearable
            >
              ></el-input
            >
          </el-form-item>
          <el-form-item class="phone-btn" label="验证码">
            <el-input
              v-model="ruleForm.verificationCode"
              autocomplete="off"
            ></el-input>
            <el-button
              class="phone-btn2"
              type="primary"
              @click="verifyBtn"
              :disabled="totalTime == 60 ? false : true"
              >{{ content }}</el-button
            >
          </el-form-item>
          <el-form-item label="原密码" prop="oldPassword">
            <el-input
              type="text"
              v-model="ruleForm.oldPassword"
              placeholder="请输入原密码"
              autocomplete="off"
            >
              ></el-input
            >
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input
              type="password"
              v-model="ruleForm.newPassword"
              placeholder="请输入新密码"
              autocomplete="off"
            >
              ></el-input
            >
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input
              type="password"
              v-model="ruleForm.confirmPassword"
              autocomplete="off"
              placeholder="请确认新密码"
            >
              ></el-input
            >
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="dialogVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
    <h1>天府新区数字城市智慧生态</h1>
    <div class="time">
      <p>{{ year }}年{{ month }}月{{ day }}日 {{ weeks }}</p>
    </div>
    <div class="btn-box">
      <div class="demo-basic--circle" @click.stop="headContentBtn">
        <div class="block">
          <el-avatar
            :size="26"
            :src="circleUrl"
            class="login-user-log"
          ></el-avatar>
        </div>
        <p class="user-name">您好，{{ loginUserInfi.loginName }}</p>
      </div>
      <transition name="el-zoom-in-top" class="header">
        <div v-show="contentBtn" class="transition-box">
          <ul class="content-btn">
            <li @click="permissions" v-if="userIdentity == true ? true : false">
              用户管理
            </li>
            <li @click="update">修改密码</li>
            <li @click="info">个人信息</li>
            <li @click="channel" v-if="userIdentity == true ? true : false">
              数据管理
            </li>
            <li @click="download" v-if="userIdentity == true ? true : false">
              移动应用下载
            </li>
            <li @click="logout">注销</li>
            <!-- <li @click="fh">返回</li> -->
          </ul>
        </div>
      </transition>
      <!-- <input type="button" value="用户管理" @click="permissions" />
      <input type="button" value="修改密码" @click="update" /><input
        type="button"
        value="退出"
        @click="logout"
      /> -->
    </div>
  </div>
</template>

<script>
import {
  GetSmsCode,
  VerifyCode,
  UnbindPhone,
  bindPhone,
  UnbindEmail,
  bindEmail,
  GetEmailCode,
  Login,
} from "@/api/api";
import local from "@/utils/local";
import { changePassword, smsVerification } from "@/api/userControl";
import flexble from "@/utils";
import { getPermission } from "@/api/userControl";
import { checkPhone, account, checkEmail, checkPwd } from "@/common/common.js";
import { Logout } from "@/api/api";
// 引入base64加密
let base64 = require("js-base64").Base64;
export default {
  data() {
    var validatePass1 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入原密码"));
      } else {
        if (this.ruleForm.oldpass !== "") {
          this.$refs.ruleForm.validateField("consirmpwd");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      let rge = /^(?![0-9]+$)(?![a-zA-Z]+$)(?!\W+$)[0-9A-Za-z\W]{8,32}$/;
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else if (!rge.test(value)) {
        callback(new Error("密码格式为8-32位字母 + 数字"));
      } else {
        callback();
      }
    };
    var validatePass3 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.newPassword) {
        callback(new Error("输入的新密码与确认密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      dialogVisibleDown: false,
      show: false,
      userIdentity: false, //登录用户是否为管理员
      contentBtn: false, //控制功能按钮的状态
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      totalTime: 60, //设置60s时间间隔
      content: "发送验证码",
      loginUserInfi: this.$store.state.loginUserInfi,
      telFlag: this.$store.state.loginUserInfi.telephone || false,
      telFlag1: false,
      emailFlag: this.$store.state.loginUserInfi.email || false,
      ruleForm: {
        user: this.$store.state.loginUserInfi.loginName,
        phone: this.$store.state.loginUserInfi.telephone,
        verificationCode: "", //短信验证码
        emailCode: "", //邮箱验证码
        oldPassword: "",
        newPassword: "",
        confirmPassword: "",
        email: this.$store.state.loginUserInfi.email,
      },
      rules: {
        oldPassword: [{ validator: validatePass1, trigger: "blur" }],
        newPassword: [{ validator: validatePass2, trigger: "blur" }],
        confirmPassword: [{ validator: validatePass3, trigger: "blur" }],
      },
      year: "",
      month: "",
      day: "",
      weeks: "",
      dialogVisible: false, // rowColor: "", //设置table的颜色 // dialogTableVisible: false, //权限弹窗状态
      dialogTableVisible: false, //权限弹窗状态
      dialogVisibleInfo: false, //用户信息弹框
      tel: this.$store.state.loginUserInfi.telephone, //用户信息电话
      email: this.$store.state.loginUserInfi.email, //用户信息邮箱
      dialogVisibleTel: false,
      dialogVisibleEmail: false,
    };
  },
  mounted() {
    // 点击头像以外的地方隐藏功能按钮
    document.querySelector("body").addEventListener("click", () => {
      this.contentBtn = false;
    });
    // 验证登录人员是否为管理员
    this.userIdentity = this.loginUserInfi.roles.some(
      (item) => item.code == "sys_admin"
    );
  },
  created() {
    this.getTime();
    this.getWeekDate();
  },
  methods: {
    // 下载
    download() {
      this.dialogVisibleDown = true;
    },
    getTime() {
      var myDate = new Date();
      this.year = myDate.getFullYear();
      this.month = myDate.getMonth() + 1;
      this.day = myDate.getDate();
    },
    getWeekDate() {
      var now = new Date();
      var day = now.getDay();
      var weeks = new Array(
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      );
      this.weeks = weeks[day];
    },

    telCancel() {
      this.dialogVisibleTel = false;
      this.ruleForm.phone = this.telFlag ? this.ruleForm.phone : "";
    },
    emailCancel() {
      this.dialogVisibleEmail = false;
      this.ruleForm.email = this.emailFlag ? this.ruleForm.email : "";
    },
    info() {
      this.dialogVisibleInfo = true;
      if (!this.ruleForm.phone) {
        this.telFlag = false;
      } else {
        this.telFlag = true;
      }
      if (!this.ruleForm.email) {
        this.emailFlag = false;
      } else {
        this.emailFlag = true;
      }
    },
    cancelInfo() {
      this.dialogVisibleInfo = false;
      location.reload();
    },
    sureInfo() {},
    // 解绑电话弹框
    async UnboundTel() {
      this.dialogVisibleTel = true;
    },
    // 解绑邮箱弹框
    UnboundEmail() {
      if (this.ruleForm.email == "") {
        this.$message({
          showClose: true,
          message: "请输入邮箱！",
          type: "error",
        });
        return;
      } else {
        this.dialogVisibleEmail = true;
      }
    },
    // 获取手机验证码
    async getTelCode() {
      let res = await GetSmsCode({
        phone: this.ruleForm.phone,
      });
      if (res.data == 0) {
        this.getCountdown();
        this.$message({
          showClose: true,
          message: "短信已发送,请注意查收！",
          type: "success",
        });
      } else {
        this.$message.error("请勿频繁操作！");
        return false;
      }
    },
    // 获取邮箱验证码
    async getEmailCodeNum() {
      if (this.ruleForm.email == "") {
        this.$message({
          showClose: true,
          message: "请输入邮箱！",
          type: "error",
        });
        return;
      } else {
        let res = await GetEmailCode({
          email: this.ruleForm.email,
        });
        if (res.data == 0) {
          this.getCountdown();
          this.$message({
            showClose: true,
            message: "邮箱验证码已发送,请注意查收！",
            type: "success",
          });
        } else {
          this.$message.error("请勿频繁操作！");
          return false;
        }
      }
    },
    // 解绑电话
    async sureTel() {
      if (this.ruleForm.verificationCode == "") {
        this.$message({
          showClose: true,
          message: "请输入验证码！",
          type: "error",
        });
        return;
      } else {
        let res = await UnbindPhone({
          accountId: this.$store.state.loginUserInfi.accountId,
          phone: this.ruleForm.phone,
          verificationCode: this.ruleForm.verificationCode,
        });
        console.log("aaa", res);
        if (res.data.code == "0000") {
          this.dialogVisibleInfo = false;
          this.telFlag = false;
          let Base64 = require("js-base64").Base64;
          this.$message({
            type: "success",
            message: res.data.message,
          });

          let rs = await Login({
            LoginName: this.ruleForm.user,
            password: sessionStorage.getItem("pwd"),
          });
          if (rs.data != "") {
            sessionStorage.setItem("LoginUserInif", JSON.stringify(rs.data)); //存储登录用户的信息

            //sessionStorage.setItem("ssokey", this.ssokey);
            let arr = await getPermission({
              loginName: this.ruleForm.user,
            });
            let aaa = arr.data.sort(function (a, b) {
              return a.permissionid - b.permissionid;
            });
            sessionStorage.setItem("data", JSON.stringify(aaa));
            if (aaa[0].permissionid == 1) {
              this.$router.push("/gas");
              location.reload();
            } else if (aaa[0].permissionid == 2) {
              this.$router.push({ path: "/water" });
              location.reload();
            } else if (aaa[0].permissionid == 3) {
              this.$router.push({ path: "/forest" });
              location.reload();
            } else if (aaa[0].permissionid == 4) {
              this.$router.push({ path: "/wellLid" });
              location.reload();
            }
          }
          location.reload();
        } else if (res.data.code == "1002") {
          this.$message({
            type: "error",
            message: "验证码错误！",
          });
          return;
        } else {
          this.$message.error("操作失败，重试！");
          return;
        }
      }
    },
    // 绑定手机
    async bindTel() {
      if (this.ruleForm.verificationCode == "") {
        this.$message({
          showClose: true,
          message: "请输入验证码！",
          type: "error",
        });
        return;
      } else {
        let res = await bindPhone({
          accountId: this.$store.state.loginUserInfi.accountId,
          phone: this.ruleForm.phone,
          verificationCode: this.ruleForm.verificationCode,
        });
        if (res.data.code == "0000") {
          this.dialogVisibleInfo = false;
          this.telFlag = true;
          let Base64 = require("js-base64").Base64;
          this.$message({
            type: "success",
            message: res.data.message,
          });
          let rs = await Login({
            LoginName: this.ruleForm.user,
            password: sessionStorage.getItem("pwd"),
          });
          if (rs.data != "") {
            sessionStorage.setItem("LoginUserInif", JSON.stringify(rs.data)); //存储登录用户的信息

            //sessionStorage.setItem("ssokey", this.ssokey);
            let arr = await getPermission({
              loginName: this.ruleForm.user,
            });
            let aaa = arr.data.sort(function (a, b) {
              return a.permissionid - b.permissionid;
            });
            sessionStorage.getItem("data", JSON.stringify(aaa));
            if (aaa[0].permissionid == 1) {
              this.$router.push("/gas");
              location.reload();
            } else if (aaa[0].permissionid == 2) {
              this.$router.push({ path: "/water" });
              location.reload();
            } else if (aaa[0].permissionid == 3) {
              this.$router.push({ path: "/forest" });
              location.reload();
            } else if (aaa[0].permissionid == 4) {
              this.$router.push({ path: "/wellLid" });
              location.reload();
            }
          }
          location.reload();
        } else {
          this.$message.error("此手机号已绑定，请换个手机号重试！");
          return;
        }
      }
    },
    // 解绑邮箱
    async sureEmail() {
      if (this.ruleForm.emailCode == "") {
        this.$message({
          showClose: true,
          message: "请输入验证码！",
          type: "error",
        });
        return;
      } else {
        let res = await UnbindEmail({
          accountId: this.$store.state.loginUserInfi.accountId,
          email: this.ruleForm.email,
          verificationCode: this.ruleForm.emailCode,
        });
        if (res.data.code == "0000") {
          this.dialogVisibleInfo = false;
          this.emailFlag = false;
          let Base64 = require("js-base64").Base64;
          this.$message({
            type: "success",
            message: res.data.message,
          });
          let rs = await Login({
            LoginName: this.ruleForm.user,
            password: sessionStorage.getItem("pwd"),
          });
          console.log("rs", rs);
          if (rs.data != "") {
            sessionStorage.setItem("LoginUserInif", JSON.stringify(rs.data)); //存储登录用户的信息

            //sessionStorage.setItem("ssokey", this.ssokey);
            let arr = await getPermission({
              loginName: this.ruleForm.user,
            });
            let aaa = arr.data.sort(function (a, b) {
              return a.permissionid - b.permissionid;
            });
            sessionStorage.getItem("data", JSON.stringify(aaa));
            if (aaa[0].permissionid == 1) {
              this.$router.push("/gas");
              location.reload();
            } else if (aaa[0].permissionid == 2) {
              this.$router.push({ path: "/water" });
              location.reload();
            } else if (aaa[0].permissionid == 3) {
              this.$router.push({ path: "/forest" });
              location.reload();
            } else if (aaa[0].permissionid == 4) {
              this.$router.push({ path: "/wellLid" });
              location.reload();
            }
            location.reload();
          }
        } else if (res.data.code == "1002") {
          this.$message({
            type: "error",
            message: "验证码错误！",
          });
          return;
        } else {
          this.$message({
            type: "error",
            message: res.data.message,
          });
          return;
        }
      }
      // this.dialogVisibleEmail = false;
    },
    // 绑定邮箱
    async bindEml() {
      if (this.ruleForm.email == "") {
        this.$message({
          showClose: true,
          message: "请输入验证码！",
          type: "error",
        });
        return;
      } else {
        let res = await bindEmail({
          accountId: this.$store.state.loginUserInfi.accountId,
          email: this.ruleForm.email,
          verificationCode: this.ruleForm.emailCode,
        });
        if (res.data.code == "0000") {
          this.dialogVisibleInfo = false;
          this.emailFlag = true;
          let Base64 = require("js-base64").Base64;
          this.$message({
            type: "success",
            message: res.data.message,
          });
          let rs = await Login({
            LoginName: this.ruleForm.user,
            password: sessionStorage.getItem("pwd"),
          });
          console.log("rs", rs);
          if (rs.data != "") {
            sessionStorage.setItem("LoginUserInif", JSON.stringify(rs.data)); //存储登录用户的信息

            //sessionStorage.setItem("ssokey", this.ssokey);
            let arr = await getPermission({
              loginName: this.ruleForm.user,
            });
            let aaa = arr.data.sort(function (a, b) {
              return a.permissionid - b.permissionid;
            });
            sessionStorage.getItem("data", JSON.stringify(aaa));
            if (aaa[0].permissionid == 1) {
              this.$router.push("/gas");
              location.reload();
            } else if (aaa[0].permissionid == 2) {
              this.$router.push({ path: "/water" });
              location.reload();
            } else if (aaa[0].permissionid == 3) {
              this.$router.push({ path: "/forest" });
              location.reload();
            } else if (aaa[0].permissionid == 4) {
              this.$router.push({ path: "/wellLid" });
              location.reload();
            }
            location.reload();
          }
        } else {
          this.$message({
            type: "error",
            message: res.data.message,
          });
          return;
        }
      }
    },

    headContentBtn() {
      this.contentBtn = !this.contentBtn;
    },
    // 短信验证码按钮
    verifyBtn() {
      var reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
      if (!reg.test(this.ruleForm.phone)) {
        this.$message({
          message: "手机号格式错误！",
          type: "error",
        });
        return;
      }
      // 请求短信验证码
      smsVerification({ phone: this.ruleForm.phone })
        .then((res) => {
          if (res.data == 0) {
            this.$message({
              message: "短信发送成功，请注意查收！",
              type: "success",
            });
            this.getCountdown();
          } else {
            this.$message;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 倒计时()
    getCountdown() {
      let clock = window.setInterval(() => {
        this.totalTime--;
        this.content = this.totalTime + "s后重新发送";
        if (this.totalTime < 0) {
          this.totalTime = 60;
          this.content = "重新发送验证码";
          window.clearInterval(clock);
        }
      }, 1000);
    },
    permissions() {
      this.$router.push("/permissions");
    },
    channel() {
      this.$router.push("/channel");
    },
    fh() {
      this.$router.go(-1);
    },
    update() {
      this.dialogVisible = true;
    },

    rowColor() {
      return "table-rowColor";
    },
    // 退出登录
     logout() {
      this.$confirm("您是否要退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Logout({ loginName: this.ruleForm.user }).then((res) => {
            if (res.data == 0) {
              this.$message({
                type: "success",
                message: "退出成功!",
              });
              sessionStorage.removeItem("LoginUserInif");
              location.reload();
              this.$router.push(`/login?redirect=${this.$route.fullPath}`);
            } else {
              this.$message.error(res.data.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            showClose: true,
            type: "info",
            message: "已取消",
          });
        });
    },

    // 密码修改提交事件
    async submitForm() {
      if (!checkPhone(this.ruleForm.phone)) {
        return;
      }
      if (this.ruleForm.verificationCode == "") {
        this.$message({
          message: "验证码不能为空！",
          type: "error",
        });
        return;
      }
      if (!checkPwd(base64.encode(this.ruleForm.oldPassword))) {
        return;
      }
      if (!checkPwd(base64.encode(this.ruleForm.newPassword))) {
        return;
      }
      if (!checkPwd(base64.encode(this.ruleForm.confirmPassword))) {
        return;
      }
      const _this = this;
      changePassword({
        loginName: this.ruleForm.user,
        verificationType: 1,
        verificationCode: this.ruleForm.verificationCode,
        oldPassword: base64.encode(_this.ruleForm.oldPassword),
        newPassword: base64.encode(_this.ruleForm.newPassword),
        confirmPassword: base64.encode(_this.ruleForm.confirmPassword),
      })
        .then((res) => {
          console.log(res);
          if (res.data == 0) {
            _this.dialogVisible = false;
            _this.$message({
              message: "修改成功！",
              type: "success",
            });
            // window.setTimeout(function () {
            //   location.reload();
            //   sessionStorage.removeItem("LoginUserInif");
            //   _this.$router.push({ path: "/login" });
            // }, 1000);
          } else {
            _this.$message({
              message: "修改失败！",
              type: "error",
            });
            return;
          }
        })
        .catch((err) => {});
    },
  },
};
</script>
<style lang="less" scoped>
// 声明
@font-face {
  //取名
  font-family: elect;
  // 引入字体文件
  src: url(../../assets/tfxq/typeface/jd.ttf);
}
img {
  cursor: pointer;
}
.top {
  height: 100px;
  background-image: url(../../assets/tfxq/imgs/top.png);
  background-size: 100% 100%;
  .time {
    position: absolute;
    top: 80%;
    right: 1%;
    color: #46ecde;
  }

  h1 {
    // position: absolute;
    // left: 50%;
    // top: 50%;
    // transform: translate(-45%, -75%);
    margin: auto;
    line-height: 50px;
    font-size: 0.4rem /* 36/75 */;
    font-weight: 400;
    text-shadow: 1px 1px 10px rgba(23, 28, 44, 0.56);
    background: linear-gradient(0deg, #90d2ff 0%, #3faeff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 1px 1px 10px rgba(23, 28, 44, 0.56);
    text-align: center;
    margin-left: 20px;
    font-family: "elect";
    color: linear-gradient(0deg, #90d2ff 0%, #3faeff 100%);
  }
}

.btn-box {
  float: right;
  input {
    background-color: #28499d;
    cursor: pointer;
    text-align: center;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #bac2d6;
    line-height: 200%;
    padding: 0 10px;
    margin-right: 15px;
  }
}
.btn-box::after {
  content: "";
  display: block;
  clear: both;
}
.btn-box > input:last-child {
  margin-right: 0;
}

.user-qx-table {
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #bac2d6;
}

.content-btn-box {
  padding: 10px 0;
}

.content-btn-box > input {
  padding: 0 15px;
  line-height: 200%;
  background-color: #29499e;
  margin-right: 15px;
  color: #81cbfe;
  cursor: pointer;
}

.content-btn-box > input:last-child {
  margin-right: 0;
}

// 声明
@font-face {
  //取名
  font-family: elect;
  // 引入字体文件
  src: url(../../assets/tfxq/typeface/jd.ttf);
}

.top {
  height: 76px;
  background-image: url(../../assets/tfxq/imgs/top.png);
  background-size: 100% 100%;
  position: relative;

  .logout {
    position: absolute;
    right: 20px;
    top: 10px;
  }
}
main {
  width: 100%;
  height: 250px;
  background: url("../../assets/tfxq/imgs/download.jpg") no-repeat top center;
  background-size: 100% 100%;
  background-position: center center;
}
</style>
<style scoped>
/* g=改变inpput框的placeholder的文字颜色 */
.from-box >>> .el-input__inner::-webkit-input-placeholder {
  color: rgb(168, 167, 167);
  /* color: #999; */
}
.from-box >>> .el-input__inner::-moz-placeholder {
  color: rgb(168, 167, 167);
}
.from-box >>> .el-input__inner:-moz-placeholder {
  color: rgb(168, 167, 167);
}
.from-box >>> .el-input__inner:-ms-input-placeholder {
  color: rgb(168, 167, 167);
}
.from-box {
  background-color: #fff;
}
.from-box >>> .el-form-item__content {
  margin: 0 35px !important;
}
.phone-btn >>> .el-form-item__content {
  display: flex;
}
.phone-btn2 {
  margin-left: 15px;
}
.btn-box .el-button:last-child {
  margin-right: 30px;
}
</style>
<style scoped>
/* g=改变inpput框的placeholder的文字颜色 */
.from-box >>> .el-input__inner::-webkit-input-placeholder {
  color: rgb(168, 167, 167);
  /* color: #999; */
}
.from-box >>> .el-input__inner::-moz-placeholder {
  color: rgb(168, 167, 167);
}
.from-box >>> .el-input__inner:-moz-placeholder {
  color: rgb(168, 167, 167);
}
.from-box >>> .el-input__inner:-ms-input-placeholder {
  color: rgb(168, 167, 167);
}
.from-box {
  background-color: #fff;
}
.from-box >>> .el-form-item__content {
  margin: 0 35px !important;
}
.phone-btn >>> .el-form-item__content {
  display: flex;
}
.phone-btn2 {
  margin-left: 15px;
}
.btn-box {
  position: absolute;
  top: 30%;
  right: 20px;
  transform: translate(0, -40%);
  z-index: 2000;
}
.btn-box .el-button:last-child {
  margin-right: 35px;
}

/* 头像部分 */
.user-name {
  color: #46ecde;
  text-align: center;
  cursor: pointer;
}
.transition-box {
  position: absolute;
  /* margin-top: 10px; */
  width: 100%;
  cursor: pointer;
}
.block {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
}
.content-btn {
  background: rgb(27, 61, 118);
}
.content-btn > li {
  line-height: 200%;
  color: #fff;
  font-size: 12px;
  text-align: center;
  border-color: transparent;
  /* padding: 0 15px; */
}
.content-btn > li:hover {
  cursor: pointer;
  background-color: rgb(33, 133, 248);
}
</style>
